<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'

import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

let lineChart = null;
let pieChart = null;

function initLineChart(){
    const array1To30: string[] = [];
    for (let i = 1; i <= 30; i++) {
        array1To30.push(`${i}`);
    }
    lineChart = echarts.init(document.getElementById('lineChart'));
    
    let lineOption: EChartsOption;
    lineOption = {
        tooltip: {
            show:true,
            trigger:'axis'
        },
        grid: {
            top:'20px',
            left: '15px',
            right: '10px',
            bottom: '5px',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: monthWarnStaticData.value.xData,
            axisLabel: {
                color: '#B5C5D4'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#B5C5D4'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#666'
                }
            }
        },
        series: [
            {
                name: '告警',
                type: 'line',
                data: totalNumData.value,
                color: '#EABA54'
            },
            {
                name: '已处理',
                type: 'line',
                data: doneNumData.value,
                color: '#18D684'
            },
            {
                name: '未处理',
                type: 'line',
                data: notDoneNumData.value,
                color: '#E73512'
            }
        ]
    }
    lineOption && lineChart.setOption(lineOption);

}

function initPieChart(){
    pieChart = echarts.init(document.getElementById('alarmPieChart'));
    let option: EChartsOption;
    option = {
        color:['#2873E8','#EABA54'],
        tooltip: {
    trigger: 'item'
  },
        
        title: [
            {
                text: tempWarnData.value[0].bunkerName,
                left: '24.5%',
                top: 0,
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                    fontWeight: 'bold',
                    lineHeight: 20,
                }
            },
            {
                text: tempWarnData.value[1].bunkerName,
                left: '74.5%',
                top: 0,
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                    fontWeight: 'bold',
                    lineHeight: 20,
                }
            }
        ],
        series: [
            {
                type: 'pie',
                radius: '55%',
                center: ['25%', '60%'],
                data: [
                    {
                        name: '正常',
                        value: tempWarnData.value[0].statusNumDatas[0].statusNum
                    },
                    {
                        name: '异常',
                        value: 0
                    },
                ],
                label: {
                    position: 'outer',
                    alignTo: 'none',
                    bleedMargin: 5,
                    formatter: '{c}',
                    color:'#fff',
                    fontSize: 16
                }
            },
            {
                type: 'pie',
                radius: '55%',
                center: ['75%', '60%'],
                data: [
                    {
                        name: '正常',
                        value: tempWarnData.value[1].statusNumDatas[0].statusNum
                    },
                    {
                        name: '异常',
                        value: 0
                    },
                ],
                label: {
                    position: 'outer',
                    alignTo: 'none',
                    bleedMargin: 5,
                    formatter: '{c}',
                    color:'#fff',
                    fontSize: 16
                }
            }
        ]
    }
    option && pieChart.setOption(option);
}


//
const totalData = ref<any>({})
const tempWarnData = ref<any>([])
const warnTipsDatas = ref<any>([])
const smckDeviceWarnDatas = ref<any>([])
const inventoryBalance = ref<any>({})
const monthWarnStaticData = ref<any>({})
const environmentDevices = ref<any>([])

const totalNumData = ref<any>([])
const doneNumData = ref<any>([])
const notDoneNumData = ref<any>([])

import { QueryDeviceWarnDealData,DeviceWarnInfoStatus } from "@/api";
function getQueryDeviceWarnDealData(){
    QueryDeviceWarnDealData().then(res=>{
        console.log('list-------',res.data)
        totalData.value = res.data.totalData
        tempWarnData.value = res.data.tempWarnData
        warnTipsDatas.value = res.data.warnTipsDatas.slice(0, 3);
        smckDeviceWarnDatas.value = res.data.smckDeviceWarnDatas.slice(0, 8);
        inventoryBalance.value = res.data.inventoryBalance
        monthWarnStaticData.value = res.data.monthWarnStaticData
        environmentDevices.value = res.data.environmentDevices

        for (const i in res.data.monthWarnStaticData.yData) {
            doneNumData.value.push(res.data.monthWarnStaticData.yData[i].doneNum)
            notDoneNumData.value.push(res.data.monthWarnStaticData.yData[i].notDoneNum)
            totalNumData.value.push(res.data.monthWarnStaticData.yData[i].totalNum)
        }
        
        initLineChart()
        initPieChart()
    })
}


// 更新--预警情况
const handleDialogVisible = ref(false)
const addForm = ref({
    status: '',
    remark:'',
})

const sId = ref('')
const submitStatus = () => {
    if(!addForm.value.status){
        ElMessage.error('请选择处理结果')
        return
    }
    DeviceWarnInfoStatus({
        id: sId.value,
        status: Number(addForm.value.status),
        remark: addForm.value.remark
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '处理成功',
            })
            handleDialogVisible.value = false
            getQueryDeviceWarnDealData()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 忽略
const ignore = (id:any) => {
    DeviceWarnInfoStatus({
        id: id,
        status: Number(2)
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '已忽略',
            })
            getQueryDeviceWarnDealData()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

onMounted(() => {
    getQueryDeviceWarnDealData()
    
});

</script>
<template>
    <!-- 弹出框/处理 -->
    <el-dialog v-model="handleDialogVisible" title="处理" width="500" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto">
                <el-form-item label="处理结果:">
                    <el-select v-model="addForm.status" placeholder="请选择">
                        <el-option label="未解决" value="3" />
                        <el-option label="已解决" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:" style="width: 92%;">
                    <el-input v-model="addForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="submitStatus">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="alarm_flex_bg">
        <div class="alarm_flex">
            <div class="alarm_flex_left">
                <div class="alarm_box_bg">
                    <div class="alarm_title">
                        今日告警事件
                    </div>
                    <div class="alarm_event_num" v-if="totalData.totalNum">
                        <strong v-for="item in Array.from(String(totalData.totalNum), Number)">
                            {{ item }}
                        </strong>
                        <span>件</span>
                    </div>
                    <ul class="alarm_event_info">
                        <li>
                            <span>
                                <img src="../../assets/img/ico_c1.png" alt="">已处理
                            </span>
                            <p>
                                <strong class="event_green">{{ totalData.doneNum }}</strong>个
                            </p>
                        </li>
                        <li>
                            <span>
                                <img src="../../assets/img/ico_c1.png" alt="">处理中
                            </span>
                            <p>
                                <strong class="event_blue">{{ totalData.notDoneNum }}</strong>个
                            </p>
                        </li>
                        <li>
                            <span>
                                <img src="../../assets/img/ico_c1.png" alt="">未响应
                            </span>
                            <p>
                                <strong class="event_red">{{ totalData.ignoreNum }}</strong>个
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="alarm_box_bg mt15">
                    <div class="alarm_title">
                        输煤程控设备运行状态
                        <el-link href="/coalyard/device/warningList" style="color: #f5f5f5;">
                            详细信息》
                        </el-link>
                    </div>
                    <table class="alarm_table">
                        <tr>
                            <th>设备名称</th>
                            <th>运行时间</th>
                            <th>运行状态</th>
                        </tr>
                        <tr v-for="(item,index) in smckDeviceWarnDatas" :key="index">
                            <td>{{ item.deviceName }}</td>
                            <td>{{ item.runTimeNum }}</td>
                            <td>
                                <span v-if="item.status == 1" class="green">{{ item.statusDes }}</span>
                                <span v-if="item.status == 0" class="red">{{ item.statusDes }}</span>
                                <span v-if="item.status == 2" class="red">{{ item.statusDes }}</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="alarm_flex_center">
                <div class="alarm_box_bg">
                    <div class="alarm_title bg_ct2">
                        煤场温度预警
                        <ul>
                            <li><i class="ico_blue"></i>正常</li>
                            <li><i class="ico_yellow"></i>异常</li>
                        </ul>
                    </div>
                    <div class="alarm_pie" id="alarmPieChart">

                    </div>
                </div>
                <div class="alarm_box_bg mt15">
                    <div class="alarm_title bg_ct2">
                        煤场环境预警
                    </div>
                    <ul class="alarm_envi">
                        <li v-for="(item,index) in environmentDevices" :key="index">
                            <h3>
                                <img v-if="item.label == '测温'" src="../../assets/img/ico_c10.png" alt="">
                                <img v-if="item.label == '湿度'" src="../../assets/img/ico_c11.png" alt="">
                                <img v-if="item.label == 'CO'" src="../../assets/img/ico_c12.png" alt="">
                                <img v-if="item.label == 'O2'" src="../../assets/img/ico_c13.png" alt="">
                                <img v-if="item.label == 'CH4'" src="../../assets/img/ico_c14.png" alt="">
                                <img v-if="item.label == 'SO2'" src="../../assets/img/ico_c15.png" alt="">
                                <img v-if="item.label == '粉尘'" src="../../assets/img/ico_c16.png" alt="">
                                {{ item.label }}
                            </h3>
                            <p :class="item.isOnWarning?'red':''">{{ item.displayText }}</p>
                        </li>
                        
                    </ul>

                </div>
            </div>
            <div class="alarm_flex_right">
                <div class="alarm_box_bg">
                    <div class="alarm_title">
                        告警提醒
                    </div>
                    <ul class="alarm_reminder">
                        <li v-for="(item,index) in warnTipsDatas" :key="index">
                            <div class="title">
                                <h3>{{ item.warnTitle }}</h3>
                                <span>{{ item.warnTime }}</span>
                            </div>
                            <p>
                                {{ item.warnMsg }}
                            </p>
                            <div class="btn">
                                <a href="javascript:;" @click="ignore(item.id)">忽略</a>
                                <a href="javascript:;" class="hover" @click="handleDialogVisible = true,sId = item.id">处理</a>
                            </div>
                        </li>
                        <!-- <li>
                            <div class="title">
                                <h3>SO2预警  </h3>
                                <span>2023-09-09 12:23:11</span>
                            </div>
                            <p>
                                3号煤场-C区（褐煤）<11号SO2>浓度为<strong>35%PPM</strong>，请及时排查!
                            </p>
                            <div class="btn">
                                <a href="#">忽略</a>
                                <a href="#" class="hover">处理</a>
                            </div>
                        </li>
                        <li>
                            <div class="title">
                                <h3>温度预警</h3>
                                <span>2023-09-09 12:23:11</span>
                            </div>
                            <p>
                                2号煤场-A区（褐煤）<5号粉尘仪>粉尘浓度为<strong>35000mg/m3</strong>，请及时排查!
                            </p>
                            <div class="btn">
                                <a href="#">忽略</a>
                                <a href="#" class="hover">处理</a>
                            </div>
                        </li> -->
                    </ul>

                </div>
            </div>
        </div>
        <div class="alarm_flex mt15">
            <div class="alarm_flex_left">
                <div class="alarm_box_bg">
                    <div class="alarm_title">
                        堆取料机自动控制预警
                    </div>
                    <div class="alarm_jiqi">
                        <div class="fz">
                            <h3>防撞预警</h3>
                            <ul>
                                <li>
                                    <img src="../../assets/img/ico_c17.png" alt="">
                                    <p>危险距离</p>
                                </li>
                                <li>
                                    <img src="../../assets/img/ico_c18.png" alt="">
                                    <p>告警距离</p>
                                </li>
                                <li>
                                    <img src="../../assets/img/ico_c19.png" alt="">
                                    <p>安全距离</p>
                                </li>
                            </ul>
                        </div>
                        <div class="yl">
                            <h3>库存余量</h3>
                            <ul>
                                <li>
                                    <img src="../../assets/img/ico_c3.png" alt="">
                                    <p>
                                        总存煤量(万吨)
                                        <strong>{{ inventoryBalance.zcml }}</strong>
                                    </p>
                                </li>
                                <li>
                                    <img src="../../assets/img/ico_c4.png" alt="">
                                    <p>
                                        存煤可用(天)
                                        <strong>{{ inventoryBalance.kyts }}</strong>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <div class="alarm_flex_month">
                <div class="alarm_box_bg">
                    <div class="alarm_title bg_ct3">
                        最近30天告警情况分布
                        <ul>
                            <li><i class="ico_yellow"></i>告警</li>
                            <li><i class="ico_green"></i>已处理</li>
                            <li><i class="ico_red"></i>未处理</li>
                        </ul>
                    </div>
                    <div class="alarm_echarts_line" id="lineChart">

                    </div>
                </div>
            </div>
        </div>
    </div>


</template>
<style scoped lang="scss">
.ico_blue{
    background: #2873E8;
}
.ico_yellow{
    background: #EABA54;
}
.ico_green{
    background: #18D684;
}
.ico_red{
    background: #E73512;
}
.alarm_pie{
    width: 100%;
    height: 180px;
}
.alarm_echarts_line{
    width: 100%;
    height: 233px;
    position: relative;
}
.alarm_jiqi{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding:0 5px;
    h3{
        font-weight: bold;
        font-size: 18px;
        color: #C3D5F8;
        line-height: 20px;
        padding:5px 0;
        
    }
    .yl{
        li{
            margin-top: 15px;
            background: rgba(36, 79, 162, 0.5);
            color:#fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:18px 25px 18px 15px;
            border-left:3px solid rgba(68, 114, 204, 1);
            img{
                flex-shrink: 0;
                margin-right: 10px;
            }
            p{
                width: 100%;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 20px;
                strong{
                    display: block;
                    font-weight: bold;
                    font-size: 22px;
                    margin-top: 10px;
                }
            }
        }
    }
    .fz{
        ul{
            padding-top: 20px;
        }
        li{
            position: relative;
            margin-top: -10px;
            p{
                position: absolute;
                left:0;
                top:15px;
                right: 0;
                bottom: 0;
                text-align: center;
                font-weight: bold;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 30px;
            }
        }
    }
}
.alarm_envi{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: -10px;
    margin-left: -2%;
    padding-bottom: 5px;
    li{
        width: 23%;
        margin-left: 2%;
        color:#fff;
        background: rgba(3, 17, 32, 0.5);
        border: 1px solid #89AAE5;
        margin-top: 20px;
        h3{
            display: flex;
            align-items: center;
            background: rgba(137, 170, 229, 0.3);
            height: 60px;
            font-size: 18px;
            img{
                margin: 0 20px;
            }
        }
        p{
            border-top: 1px solid #89AAE5;
            height: 66px;
            text-align: center;
            line-height: 66px;
            font-size: 28px;
            font-weight: bold;
            .red{
                color: #E73512;
            }
        }
        &:last-child{
            margin-right: auto;
        }
    }
}
.alarm_reminder{
    padding-bottom: 1px;
    li{
        background: rgba(154, 44, 44, 0.5);
        border-radius: 4px 4px 4px 4px;
        margin-top: 15px;
        padding:0 10px;
        &:first-child{
            margin: 0;
        }
        p{
            font-size: 18px;
            color: #EDDADD;
            line-height: 30px;
            height: 60px;
            box-sizing: border-box;
            margin: 14px 0 4px;
            overflow: hidden;
            strong{
                color:#fff;
                font-weight: bold;
            }
        }
        .btn{
            padding:10px 0 15px;
            display: flex;
            align-items: stretch;
            justify-content: flex-end;
            a{
                width: 80px;
                height: 32px;
                background: rgba(190, 152, 158, 0.7);
                line-height: 32px;
                text-align: center;
                margin-left: 10px;
                font-size: 16px;
                color: #2E0C10;
                &.hover{
                    color:#fff;
                    background: rgba(239, 69, 69, 0.7);
                }
            }
        }
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 43px;
            background: url('../../assets/img/ico_c6.png') no-repeat left center;
            position: relative;
            padding-top: 8px;
            h3{
                padding-left:15px;
                font-size: 18px;
                line-height: 30px;
                color:#fff;
                height: 30px;
                overflow: hidden;
            }
            span{
                flex-shrink: 0;
                font-size: 15px;
                color: #F6F9FE;
                line-height: 30px;
            }
        }
    }
}
.alarm_flex_bg{
    background: url('../../assets/img/ico_c_bg.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

}
.alarm_flex{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .alarm_flex_left{
        flex-shrink: 0;
        width: 450px;
    }
    .alarm_flex_center{
        width: 100%;
        padding:0 15px;
    }
    .alarm_flex_right{
        flex-shrink: 0;
        width: 400px;
    }
    .alarm_flex_month{
        width: 100%;
        margin-left: 15px;
    }
}
.alarm_box_bg{
    background: rgba(0,0,0,0.6);
    padding:15px;
    position: relative;
    .alarm_title{
        color:#fff;
        width: 100%;
        height: 50px;
        background: url('../../assets/img/ico_ct1.png') no-repeat left top;
        font-size: 22px;
        font-weight: bold;
        padding-left:35px;
        line-height: 30px;
        position: relative;
        ul{
            position: absolute;
            right: 20px;
            top: 6px;
            display: flex;
            align-items: center;
            li{
                display: flex;
                align-items: center;
                margin-left: 40px;
                font-size: 16px;
                line-height: 16px;
                i{
                    flex-shrink: 0;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    margin-right: 8px;
                }
            }
        }
        &.bg_ct2{
            background: url('../../assets/img/ico_ct2.png') no-repeat left top;
        }
        &.bg_ct3{
            background: url('../../assets/img/ico_ct3.png') no-repeat left top;
        }
    }
}
.alarm_table{
    width: 100%;
    color:#fff;
    text-align: left;
}
.alarm_table th{
    font-size: 16px;
    line-height: 22px;
    padding:5px 10px;
}
.alarm_table td{
    font-size: 14px;
    line-height: 22px;
    padding:5px 10px;
    
}
.alarm_table tr:nth-child(3n+2) td{
    background: rgba(0, 0, 0, 0.1);
}
.alarm_table tr:nth-child(3n+3) td{
    background: rgba(0, 0, 0, 0.2);
}
.alarm_table tr:nth-child(3n+4) td{
    background: rgba(0, 0, 0, 0.3);
}
.alarm_table td span{
    font-weight: bold;
    font-size: 15px;
}
.alarm_table td span.green{
    color: #1BEE8D;
}
.alarm_table td span.red{
    color: #ff0000;
}
.alarm_event_num{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 5px;
    strong{
        flex-shrink: 0;
        width: 63px;
        height: 78px;
        color:#fff;
        background: url('../../assets/img/ico_c2.png') no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        line-height: 40px;
    }
    span{
        color:#fff;
        font-size: 15px;
        line-height: 30px;
        padding:0 5px;
    }
}
.alarm_event_info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding:5px 10px 5px;
    li{
        width: 28%;
    }
    span{
        display: flex;
        align-items: center;
        color:#fff;
        font-size: 15px;
        line-height: 20px;
        padding-left: 8px;
        img{
            flex-shrink: 0;
            margin-right: 5px;
        }
    }
    p{
        display: flex;
        align-items: flex-end;
        color:#fff;
        font-size: 14px;
        line-height: 20px;
        margin-top: 10px;
        background: url('../../assets/img/ico_c5.png') no-repeat left bottom;
        padding:0 0 7px 20px;
        strong{
            font-size: 28px;
            line-height: 30px;
            padding-right: 5px;
            font-style: italic;
        }
    }
}
.event_red{
    background: linear-gradient(180deg, #FF5B1A, #FFBCA5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; /* 对某些浏览器的兼容性 */
}
.event_green{
    background: linear-gradient(180deg, #05F7BA, #B0F6E4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; /* 对某些浏览器的兼容性 */
}
.event_blue{
    background: linear-gradient(180deg, #00E4FF, #98EDFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; /* 对某些浏览器的兼容性 */
}
</style>